<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>晴天部分评论可视化</title>
    <script src="static/echarts.min.js"></script>
    <script src="static/vue.js"></script>
    <script src="static/axios.min.js"></script>
    <script src='static/echarts-wordcloud.min.js'></script>
    <script src="static/china.js"></script>
    <script src="static/echarts-liquidfill.js"></script>
    <link rel="stylesheet" href="static/css/dashboard.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            box-sizing: border-box;
        }

        #app {
            text-align: center;
            width: 100%;
            background-image: url("static/img/bg.jpg");
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center
        }

    </style>
</head>

<body>
<div id="app">
    <div style="height: 10vh;width: 100%;padding: 20px;font-size: 40px;font-family:'黑体';color: aliceblue;background-image: url('static/img/head_bg.png')">
        晴天部分评论可视化
    </div>
    <div id="main" style="display: flex;width: 95%;height: 87vh;">
        <!-- 左侧列 -->
        <div style="flex: 1;display: flex; flex-direction: column;">
            <div class="charDiv" style="height: 50%;">
                <div class="chartitle">每日的评论数量</div>
                <div id="char1" style="height: calc(100% - 40px);"></div>
                <div class="charDiv-footer"></div>
            </div>
            <div class="charDiv" style="height: 50%;">
                <div class="chartitle">用户评论数量</div>
                <div id="char2" style="height: calc(100% - 40px);"></div>
                <div class="charDiv-footer"></div>
            </div>
        </div>

        <!-- 中间地图区域保持原样 -->
        <div style="flex: 1;flex-direction:column;justify-content: center;align-items:center;height: 100%;width: 100%;">
            <img src="static/img/map.png" height="35%"
                 style="position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%);"/>
            <div id="char3" style="height: 100%;width: 100%; position: relative;z-index: 1"></div>
        </div>

        <!-- 右侧列 -->
        <div style="flex: 1;display: flex; flex-direction: column;">
            <div style="display: flex;height: 40%;gap: 10px;">
                <div class="charDiv" style="flex: 1;">
                    <div class="chartitle">积极情绪</div>
                    <div id="char4_1" style="height: calc(100% - 40px);"></div>
                    <div class="charDiv-footer"></div>
                </div>
                <div class="charDiv" style="flex: 1;">
                    <div class="chartitle">消极情绪</div>
                    <div id="char4_2" style="height: calc(100% - 40px);"></div>
                    <div class="charDiv-footer"></div>
                </div>
            </div>
            <div class="charDiv" style="height: 60%;">
                <div class="chartitle">热点词云</div>
                <div id="char5" style="height: calc(100% - 40px);"></div>
                <div class="charDiv-footer"></div>
            </div>
        </div>
    </div>
</div>

<script>

    new Vue({
        el: "#app",
        data: {
            myChar1: null,
            option1: null,
            myChar2: null,
            option2: null,
            myChar3: null,
            option3: null,
            myChar4_1: null,
            option4_1: null,
            myChar4_2: null,
            option4_2: null,
            myChar5: null,
            option5: null
        },
        methods: {
            clickchar1() {
                this.myChar1 = echarts.init(document.getElementById('char1'));
                this.option1 = {
                   
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        data: [],
                        axisLabel: {
                            color: 'rgba(255, 255, 255, 1)'
                        },
                        name: '数量',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 1)'
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            color: 'rgba(255, 255, 255, 1)'
                        }
                    },
                    series: [
                        {
                            name: '评论数量',
                            type: 'line',
                            smooth: true,
                            data: [],
                            areaStyle: {},
                            itemStyle: {
                                color: "rgb(114,250,97)"
                            }
                        }
                    ]
                };
                axios.get('/char1').then(res => {
                    res.data.forEach(item => {
                        this.option1.xAxis.data.push(item.PubDate)
                   this.option1.series[0].data.push(item.count)
                    })

                     this.myChar1.setOption(this.option1);
                })


            },
            clickchar2() {
                this.myChar2 = echarts.init(document.getElementById('char2'));
                this.option2 = {
                    
                    legend: {
                        right: '10px',
                        top: '30px',
                        textStyle: {
                            color: 'aliceblue'
                        }
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: ['25%', '50%'],
                            label: {
                                show: true,
                                formatter: '{b}\n{d}%',
                                textStyle: {
                                    color: 'aliceblue'
                                }
                            },
                            data: []
                        }
                    ]
                };
                axios.get('/char2').then(response => {
                    this.option2.series[0].data = response.data
                    this.myChar2.setOption(this.option2);
                })

            },
            clickchar3() {
                this.myChar3 = echarts.init(document.getElementById('char3'));
                this.option3 = {
                    legend: {
                        show:false
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    visualMap: {
                        show: false, // 隐藏 visualMap 组件
                        min: 0,
                        max: 1000,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        calculable: false,  // 修改此处关闭拖拽条
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        },
                        roam:false
                    },
                    series: [
                        {
                            name: '地区人数占比',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#FFF',  // 白色文字
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                },
                                shadowColor: 'rgba(0, 0, 0, 0.7)', // 阴影颜色
                                shadowBlur: 5,  // 阴影模糊度
                                shadowOffsetX: 1, // 水平偏移
                                shadowOffsetY: 1  // 垂直偏移
                            },
                            data: []
                        }
                    ]
                };
                axios.get('/char3').then(response => {
                    this.option3.series[0].data = response.data;
                    this.myChar3.setOption(this.option3);
                });

            },
            clickchar4() {
                this.myChar4_1 = echarts.init(document.getElementById('char4_1'));
                this.option4_1 = {
                    series: [{
                        type: 'liquidFill',
                        data: [], // 保持动态数据
                        color: [{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(50, 200, 100, 0.8)'
                            }, {
                                offset: 1,
                                color: 'rgba(20, 150, 80, 0.8)'
                            }]
                        }],
                        amplitude: 8,
                        waveAnimation: true,
                        animationDuration: 2000,
                        animationEasing: 'linear',
                        outline: {
                            show: true,
                            borderDistance: 2,
                            itemStyle: {
                                color: 'none',
                                borderColor: '#2cac6c',
                                borderWidth: 3
                            }
                        },
                        backgroundStyle: {
                            color: 'rgba(20, 80, 50, 0.2)'
                        },
                        label: {
                            fontSize: 24,
                            color: '#dfff4f',
                            formatter: function(param) {
                                return `${(param.value * 100).toFixed(1)}%`;
                            }
                        },
                        waveLength: '150%',
                        phase: 'auto',
                        direction: 'right',
                        itemStyle: {
                            opacity: 0.9,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.4)'
                        }
                    }]
                };
                this.myChar4_2 = echarts.init(document.getElementById('char4_2'));
                this.option4_2 = {
                    series: [{
                        type: 'liquidFill',
                        data: [], // 保持动态数据
                        color: [{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(200, 50, 100, 0.8)'
                            }, {
                                offset: 1,
                                color: 'rgba(150, 20, 80, 0.8)'
                            }]
                        }],
                        amplitude: 8,
                        waveAnimation: true,
                        animationDuration: 2500,
                        outline: {
                            show: true,
                            borderDistance: 2,
                            itemStyle: {
                                borderColor: '#ac2c5c'
                            }
                        },
                        backgroundStyle: {
                            color: 'rgba(80, 20, 50, 0.2)'
                        },
                        label: {
                            fontSize: 24,
                            color: '#ff9f9f',
                            formatter: function(param) {
                                return `${(param.value * 100).toFixed(1)}%`;
                            }
                        },
                        waveLength: '130%',
                        phase: 'auto',
                        direction: 'left',
                        itemStyle: {
                            opacity: 0.9,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.4)'
                        }
                    }]
                };
                axios.get('/char4').then(response => {
                    let jiji = parseInt(response.data[0]['value']);
                    let xiaoji = parseInt(response.data[1]['value']);
                    
                    // 积极情绪数据
                    this.option4_1.series[0].data = [jiji / (jiji + xiaoji)];
                    
                    // 消极情绪数据
                    this.option4_2.series[0].data = [xiaoji / (jiji + xiaoji)];
                    
                    this.myChar4_1.setOption(this.option4_1);
                    this.myChar4_2.setOption(this.option4_2);
                });
            },
            clickchar5() {
                this.myChar5 = echarts.init(document.getElementById('char5'));

                this.option5 = {
                    series: [
                        {
                            type: "wordCloud", //类型是词云图
                            shape: "cardioid", //词云图的形状为圆形
                            keepAspect: false, //不保持词云图的纵横比
                            //词云图的位置和大小
                            left: "center",
                            top: "center",
                            width: "85%",
                            height: "85%",
                            right: null,
                            bottom: null,
                            sizeRange: [12, 200], //词云图中词语的字体大小范围，最小12px，最大60px
                            rotationRange: [-90, 90], //词云图中词语的旋转角度范围
                            rotationStep: 45, //词云图中词语的旋转步长
                            gridSize: 10, //词云图中词语的间距
                            drawOutOfBound: false, //不绘制超出词云图范围的词语
                            layoutAnimation: true, //开启布局动画
                            //词云图中词语的样式
                            textStyle: {
                                fontWeight: "bold",
                                color: function () {
                                    return (
                                        "rgb(" +
                                        [
                                            Math.round(Math.random() * 160),
                                            Math.round(Math.random() * 160),
                                            Math.round(Math.random() * 160),
                                        ].join(",") +
                                        ")"
                                    );
                                },
                            },
                            // 词云图中词语的高亮样式
                            emphasis: {
                                textStyle: {
                                    textShadowBlur: 2,
                                    textShadowColor: "orange",
                                },
                            },
                            // 词云图中的数据，必须有name和value属性
                            data: [],
                        }]
                }
                axios.get('/char5').then(response => {
                    this.option5.series[0].data = response.data
                    this.myChar5.setOption(this.option5);
                })


            }
        },
        mounted() {
            this.clickchar1()
            this.clickchar2()
            this.clickchar3()
            this.clickchar4()
            this.clickchar5()
        }
    });

</script>
</body>
</html>
